<template>
  <div class="examine_detail">
    <head-top head-title="具体详情" go-back="true"></head-top>
    <div class="detail_whole">
      <ul class="basic_info">
        <li><span>请假人姓名：</span><span>{{list.name}}</span></li>
        <li><span>联系方式：</span><span>{{list.phone}}</span></li>
        <li><span>提交时间：</span><span>{{list.created_at*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span></li>
        <li><span>请假类型：</span><span>{{list.type}}</span></li>
        <li><span>所属部门：</span><span>{{list.department}}</span></li>
        <li><span>开始时间：</span><span>{{list.time_start*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span></li>
        <li><span>结束时间：</span><span>{{list.time_end*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span></li>
        <li><span>请假天数：</span><span>{{list.day_num}}天</span></li>
      </ul>
      <div class="gray_line"></div>
      <ul class="basic_des">
        <li>
          <span>请假说明：</span>
          <div class="text_area">
            <textarea readonly="readonly" :placeholder="list.content"></textarea>
          </div>
        </li>
      </ul>
      <div class="gray_line"></div>
      <ul class="basic_image">
        <li class="border-bottom">
          <span>图片说明：</span>
          <img-pic :list="list"></img-pic>
        </li>
      </ul>
      <div class="btn_two" v-show="list.status === 1">
        <button class="btn_no" @click="btnNo(list.id)">
          <span>拒绝请假</span>
        </button>
        <button class="btn_yes" @click="btnYes(list.id)">
          <span>已同意</span>
        </button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .examine_detail {
    padding-top: 40px;
    .detail_whole {
      width: 100%;
      .basic_info {
        padding: 10px;
        li {
          font-size: 15px;
          width: 100%;
          padding: 10px 0;
        }
      }
      .gray_line {
        width: 100%;
        height: 5px;
        background: #f2f2f2;
      }
      .basic_des {
        padding: 10px;
        font-size: 15px;
        .text_area {
          padding-top: 10px;
          textarea {
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            height: 120px;
            background: #f2f2f2;
            border-radius: 5px;
            resize: none;
            outline: none;
            border: none;
            font-size: 14px;
          }
        }
      }
      .basic_image {
        padding: 10px;
        font-size: 15px;
        .image_des {
          width: 100%;
          padding: 5px 0 10px 0;
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
              background-color: #f2f2f2;
            }
          }
        }
      }
      .btn_two {
        width: 100%;
        display: inline-flex;
        justify-content: space-around;
        padding-bottom: 20px;
        button {
          width: 150px;
          height: 44px;
          background: #fff;
          outline: none;
          border-radius: 5px;
          font-size: 15px;
        }
        .btn_no {
          border: 1px solid #d9d9d9;
        }
        .btn_yes {
          border: 1px solid #007aff;
          color: #007aff;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../../components/header/Header.vue'
  import { Toast, Indicator } from 'mint-ui'
  import { getExamineDetail, getsetExamine } from '../../api/supervise'
  import imgPic from '../common/imgPic'

  export default {
    data () {
      return {
        list: {},
        yesStatus: 2, // 同意按钮所要传的状态值
        noStatus: 3 // 不同意按钮所要传的状态值
      }
    },
    created () {
      this._getExamineDetail()
    },
    methods: {
      _getExamineDetail () {
        getExamineDetail(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.list = res.data
            // console.log(this.list)
          }
        })
      },
      btnNo (id) {
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        getsetExamine(id, this.noStatus).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 2500
            })
            this.$router.back()
          }
        })
      },
      btnYes (id) {
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        getsetExamine(id, this.yesStatus).then(res => {
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 2500
            })
            this.$router.back()
          }
        })
      }
    },
    components: {
      headTop,
      imgPic
    }
  }
</script>
